<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Spinning Earth with Css Only | 俊樹&#39;s Miscellaneous</title>

    
<link href="/favicon/favicon.ico" rel="shortcut icon" type="image/x-icon" />




<meta name="author" content="安田俊樹" />
<meta name="description" content="Spinning Earth with plain Css.
" />



<meta name="generator" content="Hugo 0.81.0" />

<link rel="canonical" href="https://AShao0425.github.io/posts/sipnning-earth-demo/" />


<meta property="og:title" content="Spinning Earth with Css Only" />
<meta property="og:description" content="Spinning Earth with plain Css." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://AShao0425.github.io/posts/sipnning-earth-demo/" /><meta property="article:section" content="posts" />
<meta property="article:published_time" content="2021-09-01T02:14:49&#43;08:00" />
<meta property="article:modified_time" content="2021-09-01T02:14:49&#43;08:00" />




<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Spinning Earth with Css Only"/>
<meta name="twitter:description" content="Spinning Earth with plain Css."/>


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<link rel="stylesheet" href="/css/icomoon.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/overlayscrollbars@1.13.1/css/OverlayScrollbars.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css">
<link rel="stylesheet" href="/css/site.css" />

<style>
  .ui.header a:not(.item, .ui.button):hover {
    text-decoration: underline;
  }

  
  a:not(.item, .ui.button) {
    color: seagreen !important;
  }
  

  
  .inverted a:not(.item, .ui.button) {
     color: darkseagreen !important;
  }
  

  
  body.default {
    
    background-color: ZgotmplZ;
    

    
    background-image: url(/background/back1.png);
    
  }
  

  
  body.dark {
    
    background-color: ZgotmplZ;
    

    
    background-image: url(/background/BackgroundBlack.jpg);
    
  }
  
</style>


<script>
  document.addEventListener('visibilitychange',function(){
      if( document.visibilityState == 'hidden' ){
      normal_title = document.title;
      document.title = 'w(ﾟДﾟ)w Ugh, site crashed！';
      }else{
      document.title = '(/▽＼) Yay, Site got fixed！';
      setTimeout(function(){
          document.title = normal_title;
      }, 1200)
      }
  });
</script>


<script src="/js/pace.min.js"></script>
<link href="/css/pace-theme-flash.css" rel="stylesheet">

    



<link rel="stylesheet" data-highlight href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/tomorrow.min.css" />




<script src='//unpkg.com/valine/dist/Valine.min.js'></script>




    
    <link rel="stylesheet" href="/css/custom.css" />
    
	
	
    <link rel="stylesheet" href="/live2d/css/live2d.css" />

  
    <link rel="stylesheet" href="/css/APlayer.min.css">
    <script src="/js/APlayer.min.js"></script>
  
    <script src="/js/Meting.min.js"></script>

  </head>

  <body class="default">
    
<nav class="ui secondary menu dream-menu dream-nav">

  <a class="item dream-flip-toggle" title="Flip it!">
    <i class="large link bullseye icon"></i>
  </a>
  <a class="item" href="https://AShao0425.github.io/" title="Home">
    <i class="large link home icon"></i>
  </a>
  
  <a class="item" onclick="themeSwitch(event)">
    <i class="large link icon theme-switch"></i>
  </a>
  
  
  <a class="item" title="Search" onclick="toggleSearch(event)">
    <i class="large link search icon"></i>
  </a>
  
</nav>

    <div class="flip-container">
      <div class="flipper">
        <section class="front">
          <div class="dream-max-width">
            
<div class="ui relaxed centered grid dream-grid dream-grid-single">
  
  
  
  

  
  <div class="sixteen wide mobile sixteen wide tablet ten wide computer column markdown-body dream-single" id="dream-save-post-as-img">
    <section class="ui top attached segment">
      <header>
        <h1 class="ui large header">Spinning Earth with Css Only<span class="sub header">
            <span class="left">
              @
              
                
                  安田俊樹
                
              

              | 
                  <span data-format="luxon">2021-09-01T02:14:49&#43;08:00</span>
                

              | 6 minutes read

              
              | Update at
                
                  <span data-format="luxon">2021-09-01T02:14:49&#43;08:00</span>
                
              
            </span>

            
            <span class="dream-share">
  <a href="#" class="save-as-image" title="Save as image" onclick="savePostAsImg()">
    <i class="save icon"></i>
  </a>
  <a href="https://twitter.com/intent/tweet?text=Spinning%20Earth%20with%20Css%20Only&url=https%3a%2f%2fAShao0425.github.io%2fposts%2fsipnning-earth-demo%2f" title="Twitter">
    <i class="twitter icon"></i>
  </a>
  <a href="https://facebook.com/sharer/sharer.php?u=https%3a%2f%2fAShao0425.github.io%2fposts%2fsipnning-earth-demo%2f" title="Facebook">
    <i class="facebook icon"></i>
  </a>
</span>

            
          </span>
        </h1>
      </header>

      <article class="main">
        

        <p>Spinning Earth with plain Css.</p>
<style>
/**
Globe Elements
**/
.globe__placeholder {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  overflow: visible;
  position: relative;
  float: center;
  padding: 0;
  margin: 0;
  margin-bottom: 16px;
  height: 200px; /* Unscaled is 200px. If 'globe__container' is scaled, multiply this value by scale() property, e.g. 200px * 0.5 = 100px */
  width:  200px; /* Unscaled is 200px. If 'globe__container' is scaled, multiply this value by scale() property, e.g. 200px * 0.5 = 100px */
}

.globe__container {
  overflow: visible;
  position: relative;  
  display: block;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
}

.globe__container,
.globe {
  width: 200px;
  height: 200px;  
}
.globe {
  overflow: visible;
  position: relative;  
  display: block;
  margin: 0;
  padding: 0;
  top: 0; left: 0;
}

.globe__worldmap,
.globe__worldmap__front,
.globe__worldmap__back,
.globe__sphere,
.globe__outer_shadow,
.globe__reflections__bottom,
.globe__inner_shadow,
.globe__reflections__top,
.globe__outer_shadow {
  position: absolute; display: block; margin: 0; right: auto; bottom: auto;  
}

.globe__sphere,
.globe__outer_shadow,
.globe__reflections__bottom,
.globe__inner_shadow,
.globe__reflections__top {
  left: 0; top: 0; width: 200px; height: 200px;
  background-position: 0 0; background-repeat: no-repeat;
}
.globe__outer_shadow {
  left: 0; top: 186px; width: 200px; height: 30px;
  background-position: 0 0; background-repeat: no-repeat;
}

/* Circle mask for animated SVG files */
.globe__worldmap {
  left: 0; top: 0; width: 200px; height: 200px; overflow: hidden;
  -webkit-border-radius: 50%;
   -khtml-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
/*
  overflow: visible;
*/
}

.globe__worldmap__front,
.globe__worldmap__back {
  left: 0; top: 0; width: 1000px; height: 200px; overflow: visible;
  background-image: url(//repo.bfw.wiki/bfwrepo/svg/worldmap_2x.svg);
  background-repeat: no-repeat;
}



/**
Globe elements visibility options
**/
.globe__sphere { background-image: url(http://www.cakecounter.com/globe/white-blue/globe_images/sphere.svg); display: none;}

.globe__outer_shadow { background-image: url(http://www.cakecounter.com/globe/white-blue/globe_images/outer_shadow.svg);}
.globe__reflections__top { background-image: url(http://www.cakecounter.com/globe/white-blue/globe_images/reflections.svg); display: none;}
.globe__reflections__bottom { background-image: url(http://www.cakecounter.com/globe/white-blue/globe_images/reflections.svg); display: none;}
.globe__inner_shadow { background-image: url(http://www.cakecounter.com/globe/white-blue/globe_images/inner_shadow.svg);}
.globe__worldmap__front { background-position: 0px 0px;
animation: textureSpinreverse 8s linear infinite;
}
.globe__worldmap__back { background-position: 0px -220px;
    animation: textureSpin 8s linear infinite;
}

body { background-color: #fff;}
.container h2 {
  padding: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 32px;
  line-height: 1.2;
}
.container h2 span {
  font-size: 65%;
}
.container h3 {
  padding: 0;
  margin: 0;
  font-size: 18px;
  font-weight: normal;
  padding-bottom: 1em;
}
.container p {
  color: #a6aeb5;
}

.container {
  margin: 0 auto;
  width: 100%;
  padding-left: 300px;
  padding-right: 10%;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
/*outline: 1px solid green;*/
}
.container .btn { text-align: right; clear: both; padding: 1em; padding-top: 1.5em; border-top: 1px solid rgba(0,0,0,0.1); }
.container button { width: 100px; height: 40px; border: none; border-bottom: 1px solid #ccc; background-color: #efefef; border-radius: 4px; }

.controls {
  background-color: #F8F8F8;
  font: normal 14px/1 Arial, Tahoma;
  width: 266px;
  position: absolute;
  top: 0;
  left: 0;
/*
*/
  z-index: 100; 

  height: 100%;
  overflow: auto;
-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0, 0.1);
   -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0, 0.1);
        box-shadow: 2px 2px 5px 0px rgba(0,0,0, 0.1);
}
.controls div {
  padding: 10px 20px;
  clear: both;
}
.controls div#stage-bg-color {
  padding-top: 20px;
  padding-bottom: 6px;
}
a {
  color: #ccc;
  text-decoration: none;
}
a:hover {
  color: #000;
  text-decoration: none;
}
a.on {
  color: #51B7FF;
  text-decoration: none;
  pointer-events: none; /* IE 11+, Safari 4+, Firefox 3.6+, Chrome */
}

div.opacity {
  padding-bottom: 0;
}
div.opacity div {
  padding-left: 15px;
  margin-right: 10px;
  position: relative;
  font-size: 12px;
}
input.range {
  width: 80px;
  float: right;

  padding: 0;
  margin: 0;
}
input.text {
  width: 35px;
  border: none;
  background-color: #fff;
  color: #ccc;
  display: none;
}
input.color {
  font-size: 12px;
  margin-top: 0px;
  width: 50px;
  border: 1px solid rgba(204,204,204,0.5);
  padding: 6px;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}
button#play {
  width: 50px;
}
.info {
  color: #a6aeb5;
  font-size: 90%;
  line-height: 1.3;
}
.info ul {
  padding-left: 15px;
}
.info ul li {
  padding-bottom: .5em;
}
a.button {
  border: 1px solid #51B7FF;
  color: #51B7FF;
  padding: 12px;
-webkit-border-radius: 5px;
   -moz-border-radius: 5px;
        border-radius: 5px;
}
a.button:hover {
  border: 1px solid #609DE5;
  color: #444;
}

#Stage code {
  position: absolute;
  top: 366px;
  right: 0px;
  left: 0;
  text-align: center;
  z-index: 99;
  font-family: Arial, "MS Trebuchet";
  font-size: 13px;
  color: #333;
}
#Stage code.white {
  color: rgba(255,255,255,0.95);
}

.controls .nav-container {
  position: relative;
  padding-top: 20px;
  padding-bottom: 20px;
}

.controls #nav {
  width: 206px;
  display: inline-block;
  margin-right: 5px;
}
.controls .nav-fwd-bck {
  font-size: 13px;
  display: inline-block;
  padding: 0;
}
.nav-fwd-bck a {
  padding: 5px 0px;
  border: none;
}
.nav-fwd-bck a:hover {
  border: none;
}

#big-nav {
  position: absolute;
  z-index: 999;
  font-size: 36px;
  font-weight: bold;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  top: 410px;
  left: 8px;
  width: 265px;
  text-align: left;
}
#big-nav a {
  display: inline-block;
  border: none;
  color: #51B7FF;
}
#big-nav a:hover {
  border: none;
  color: #a6aeb5 !important;
}

div.reflections {
  font-size: 12px;
  padding-bottom: 20px;
}
.reflections strong {
  font-weight: normal;
  padding-left: 15px;
  padding-right: 5px;
}
.reflections a {
  padding-left:  1px;
  padding-right: 1px;
}

.disabled {
  color: #ccc;
}

.info a {
  color: #727272;
  border-bottom: 1px dashed #51B7FF;
}
.info a:hover {
  color: #444;
  border-bottom: 1px dashed #51B7FF;
}

.title p {
  font-family: Arial, "MS Trebuchet";
  font-size: 20px;
  margin: 5px 0;
  padding: 0;
}
.title p.sub {
  padding-top: 0.65em;
  font-size: 12px;
}

.buy {
  margin-top: 10px;
  margin-bottom: 10px;
}
.buy a{
  font-size: 13px;
  font-weight: bold;
  color: #708090;
  border-color: #708090;
  border-color: rgba(112,128,144,0.85);
  border-width: 2px;
  text-align: center;
-webkit-transition: .25s all ease;
   -moz-transition: .25s all ease;
     -o-transition: .25s all ease;
        transition: .25s all ease;
display: inline-block;
width: 180px;
}
.buy a:hover{
  border-width: 2px;
  color: #fff;
  border-color: #51B7FF;
  background-color: #51B7FF;
}

.examples a {
  border-color: #fff;
  display: inline-block;
  margin-bottom: 3px;
}
.examples a:hover {
  color: #51B7FF;
}

.reflections .t {
  padding: 2px 5px;
  display: inline-block;
}


#Stage {
    -webkit-transition: background-color 0.2s ease 0.0s;
       -moz-transition: background-color 0.2s ease 0.0s;
        -ms-transition: background-color 0.2s ease 0.0s;
         -o-transition: background-color 0.2s ease 0.0s;
            transition: background-color 0.2s ease 0.0s;
}

.ani_bgc {
    -webkit-transition: background-color 0.25s ease 0.0s;
       -moz-transition: background-color 0.25s ease 0.0s;
        -ms-transition: background-color 0.25s ease 0.0s;
         -o-transition: background-color 0.25s ease 0.0s;
            transition: background-color 0.25s ease 0.0s;
}
.ani_opacity {
-webkit-transition: 0.25s opacity;
   -moz-transition: 0.25s opacity;
     -o-transition: 0.25s opacity;
        transition: 0.25s opacity;
}


/*
@media screen and (max-width: 1920px){}
@media screen and (max-width: 1680px){}
*/
@media screen and (max-width: 1400px){
  #Stage, .title {
/*  left: 250px !important;*/
  }
}
/*
@media screen and (max-width: 1200px){}
@media screen and (max-width: 1024px){}
*/


@keyframes textureSpin {
  from {
    transform: translateX(0);
  }
  to {
        transform: translateX(-47.5%);
  }
}


@keyframes textureSpinreverse {
  from {
        transform: translateX(-47.5%);
  }
  to {
    transform: translateX(0);
  }
}




@media screen and (max-width: 768px)
{
  .container{padding-left: 140px;}
}

@media screen and (max-width: 425px)
{
  .container{padding-left: 70px;}
}

@media screen and (max-width: 320px)
{
  .container{padding-left: 0px;}
}
</style>
<script id="picviewer-page-script">(function(messageID){
                var frameID=Math.random();
                var frames={
                    top:window.top,
                };

                window.addEventListener('message',function(e){
                    var data=e.data;
                    if( !data || !data.messageID || data.messageID != messageID )return;//通信ID认证
                    var source=e.source;
                    if(source===window){//来自contentscript,发送出去,或者干嘛。
                        if(data.to){
                            data.from=frameID;
                            frames[data.to].postMessage(data,'*');
                        }else{
                            switch(data.command){
                                case 'getIframeObject':{
                                    var frameWindow=frames[data.windowId];
                                    var iframes=document.getElementsByTagName('iframe');
                                    var iframe;
                                    var targetIframe;
                                    for(var i=iframes.length-1 ; i>=0 ; i--){
                                        iframe=iframes[i];
                                        if(iframe.contentWindow===frameWindow){
                                            targetIframe=iframe;
                                            break;
                                        };
                                    };
                                    var cusEvent=document.createEvent('CustomEvent');
                                    cusEvent.initCustomEvent('pv-getIframeObject',false,false,targetIframe);
                                    document.dispatchEvent(cusEvent);
                                }break;
                            };
                        };

                    }else{//来自别的窗口的，contentscript可以直接接收，这里保存下来自的窗口的引用
                        frames[data.from]=source;
                    };
                },true)
            })("pv-0.5106795670312598")</script><style type="text/css">                    #pv-float-bar-container {                    position: absolute;                    z-index:9999999998;                    padding: 5px;                    margin: 0;                    border: none;                    opacity: 0.6;                    line-height: 0;                    -webkit-transition: opacity 0.2s ease-in-out;                    transition: opacity 0.2s ease-in-out;                    display:none;                    }                    #pv-float-bar-container:hover {                    opacity: 1;                    }                    #pv-float-bar-container .pv-float-bar-button {                    vertical-align:middle;                    cursor: pointer;                    width: 18px;                    height: 18px;                    padding: 0;                    margin:0;                    border: none;                    display: inline-block;                    position: relative;                    box-shadow: 1px 0 3px 0px rgba(0,0,0,0.9);                    background: transparent center no-repeat;                    background-size:100% 100%;                    background-origin: content-box;                    -webkit-transition: margin-right 0.15s ease-in-out ,  width 0.15s ease-in-out ,  height 0.15s ease-in-out ;                    transition: margin-right 0.15s ease-in-out ,  width 0.15s ease-in-out ,  height 0.15s ease-in-out ;                    }                    #pv-float-bar-container .pv-float-bar-button:not(:last-child){                    margin-right: -14px;                    }                    #pv-float-bar-container .pv-float-bar-button:first-child {                    z-index: 4;                    }                    #pv-float-bar-container .pv-float-bar-button:nth-child(2) {                    z-index: 3;                    }                    #pv-float-bar-container .pv-float-bar-button:nth-child(3) {                    z-index: 2;                    }                    #pv-float-bar-container .pv-float-bar-button:last-child {                    z-index: 1;                    }                    #pv-float-bar-container:hover > .pv-float-bar-button {                    width: 24px;                    height: 24px;                    }                    #pv-float-bar-container:hover > .pv-float-bar-button:not(:last-child) {                    margin-right: 4px;                    }                    #pv-float-bar-container .pv-float-bar-button-actual {                    background-image:url("");                    }                    #pv-float-bar-container .pv-float-bar-button-search {                    background-image:url("");                    }                    #pv-float-bar-container .pv-float-bar-button-gallery {                    background-image:url("");                    }                    #pv-float-bar-container .pv-float-bar-button-current {                    background-image:url("");                    }                    #pv-float-bar-container .pv-float-bar-button-magnifier {                    background-image:url("");                    }                    </style>
</head>
<body translate="no" marginwidth="0" marginheight="0">
<div class="container">
<div class="globe__placeholder">
<div class="globe__container">
<div class="globe">
<div class="globe__sphere"></div>
<div class="globe__outer_shadow"></div>
<div class="globe__reflections__bottom"></div>
<div class="globe__worldmap">
<div class="globe__worldmap__back"></div>
<div class="globe__worldmap__front"></div>
</div>
<div class="globe__inner_shadow"></div>
<div class="globe__reflections__top"></div>
</div>
</div>
</div>
</div>
<p><span id="pv-float-bar-container" style="opacity: 1; top: 15.5938px; left: 155.594px; display: block;"><span class="pv-float-bar-button pv-float-bar-button-actual" title="View original (A)" style="display: none;"></span><span class="pv-float-bar-button pv-float-bar-button-current" title="View current (C)"></span><span class="pv-float-bar-button pv-float-bar-button-gallery" title="View Gallery (G)" style="display: none;"></span><span class="pv-float-bar-button pv-float-bar-button-magnifier" title="Magnifier / ZooM (M)" style="display: none;"></span></span></body></p>
      </article>
    </section>

    

    

    
    <article class="ui segment" data-html2canvas-ignore>
      <div id="vcomments"></div>
    </article>

    <script>
      new Valine({
        el: '#vcomments',
        appId: "mmsIvsDj8zvjpXmWqjS1DE0a-MdYXbMMI",
        appKey: "SM2s2HytuJJzA4lKWcAVKGMG",
        lang:  null 
      })
    </script>
    
  </div>
</div>

            <footer class="ui basic center aligned segment" style="background-color: transparent;">
              
              <p>© 2020 - 2021 俊樹&#39;s Miscellaneous</p>
              
            
            
            <script type="text/javascript"> 
              if(window.console) {
	              var cons = console; 
	              if(cons) { 
		              cons.group("Hey hey hey👀！");
		              cons.info("👋🏻Hi there, YES IT'S YOU, watching my source code yea?！I'm watching you🖕🏻 https://ashao0425.github.io/"); 
		              cons.log("%c俊樹's Miscellaneous", "background-image: linear-gradient(#063053, #395873, #5c7c99);font-size: 2rem;");
		              cons.info("==============================Splitting Line==============================");
		              cons.log("  █████▒█    ██  ▄████▄   ██ ▄█▀       ██████╗ ██╗   ██╗ ██████╗\n▓██   ▒ ██  ▓██▒▒██▀ ▀█   ██▄█▒        ██╔══██╗██║   ██║██╔════╝\n▒████ ░▓██  ▒██░▒▓█    ▄ ▓███▄░        ██████╔╝██║   ██║██║  ███╗\n░▓█▒  ░▓▓█  ░██░▒▓▓▄ ▄██▒▓██ █▄        ██╔══██╗██║   ██║██║   ██║\n░▒█░   ▒▒█████▓ ▒ ▓███▀ ░▒██▒ █▄       ██████╔╝╚██████╔╝╚██████╔╝\n ▒ ░   ░▒▓▒ ▒ ▒ ░ ░▒ ▒  ░▒ ▒▒ ▓▒       ╚═════╝  ╚═════╝  ╚═════╝\n ░     ░░▒░ ░ ░   ░  ▒   ░ ░▒ ▒░\n ░ ░    ░░░ ░ ░ ░        ░ ░░ ░\n          ░     ░ ░      ░  ░\n")
		              cons.groupEnd();
	              } 
              }
              </script>
              
			        
              <center>
                <script async src="/js/busuanzi.pure.mini.js"></script>
				        👀Site views: <span style="color:seagreen"><span id="busuanzi_value_site_pv"></span></span> times
              </center>
              
			        
              <center>
                👶Site age: <SPAN id=span_dt_dt style="color: #2E8B57;"></SPAN>
                <SCRIPT language=javascript>
                function show_date_time(){
                window.setTimeout("show_date_time()", 1000);
                BirthDay=new Date("9/5/2021 02:14:49");
                today=new Date();
                timeold=(today.getTime()-BirthDay.getTime());
                sectimeold=timeold/1000
                secondsold=Math.floor(sectimeold);
                msPerDay=24*60*60*1000
                e_daysold=timeold/msPerDay
                daysold=Math.floor(e_daysold);
                e_hrsold=(e_daysold-daysold)*24;
                hrsold=Math.floor(e_hrsold);
                e_minsold=(e_hrsold-hrsold)*60;
                minsold=Math.floor((e_hrsold-hrsold)*60);
                seconds=Math.floor((e_minsold-minsold)*60);
                span_dt_dt.innerHTML=""+daysold+" "+"days"+" "+hrsold+" "+"hours"+" "+minsold+" "+"minutes"+" "+seconds+" "+"seconds";
                }
                show_date_time();
                </SCRIPT>
              </center>
              
              
              
              
            </footer>
          </div>
        </section>
        <section class="back">
          <div class="dream-max-width">
            <header class="ui basic very padded segment dream-header">
  
  <div class="ui small circular image">
    <img src="/avatar/Avatar3.jpg" alt="avatar" />
  </div>
  

  
    <script>
  MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']],
      displayMath: [['$$','$$'], ['\\[', '\\]']],
      processEscapes: true,
      processEnvironments: true
    },
    options: {
      skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre']
    }
  };
  
  window.addEventListener('load', (event) => {
      document.querySelectorAll("mjx-container").forEach(function(x){
        x.parentElement.classList += 'has-jax'})
    });
  
  </script>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  <script type="text/javascript" id="MathJax-script" async
    src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
  

  <div class="content">
    <h1 class="ui medium header">俊樹&#39;s Miscellaneous<span class="sub header"><div id="binft"></div><script>var binft=function(t){function r(){return f[Math.floor(Math.random()*f.length)]}function e(){return String.fromCharCode(94*Math.random()+33)}function n(t){for(var n=document.createDocumentFragment(),i=0;t>i;i++){var l=document.createElement("span");l.textContent=e(),l.style.color=r(),n.appendChild(l)}return n}function i(){var r=a[c.skillI];c.step?c.step--:(c.step=o,c.prefixP<l.length?(c.prefixP>=0&&(c.text+=l[c.prefixP]),c.prefixP++):"forward"===c.direction?c.skillP<r.length?(c.text+=r[c.skillP],c.skillP++):c.delay?c.delay--:(c.direction="backward",c.delay=g):c.skillP>0?(c.text=c.text.slice(0,-1),c.skillP--):(c.skillI=(c.skillI+1)%a.length,c.direction="forward")),t.textContent=c.text,t.appendChild(n(c.prefixP<l.length?Math.min(b,b+c.prefixP):Math.min(b,r.length-c.skillP))),setTimeout(i,d)}var l="",a=["Lover of Mathematics and Science."].map(function(t){return t+""}),g=2,o=1,b=5,d=75,f=["rgb(110,64,170)","rgb(150,61,179)","rgb(191,60,175)","rgb(228,65,157)","rgb(254,75,131)","rgb(255,94,99)","rgb(255,120,71)","rgb(251,150,51)","rgb(226,183,47)","rgb(198,214,60)","rgb(175,240,91)","rgb(127,246,88)","rgb(82,246,103)","rgb(48,239,130)","rgb(29,223,163)","rgb(26,199,194)","rgb(35,171,216)","rgb(54,140,225)","rgb(76,110,219)","rgb(96,84,200)"],c={text:"",prefixP:-b,skillI:0,skillP:0,direction:"forward",delay:g,step:o};i()};binft(document.getElementById("binft"));</script></span>
    </h1>

    <article class="ui horizontal list">
      
      <a class="item" href="/posts">
        <i class="archive icon" title="Archives"></i>
      </a>
      
      <a class="item" href="/categories">
        <i class="th list icon" title="All Categories"></i>
      </a>
      <a class="item" href="/tags">
        <i class="tags icon" title="All Tags"></i>
      </a>
    </article>

    
    
    
    
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
    

    

    
    
    
          <div class="dream-tags">
          
          
          
            <a class="ui label" href="/tags/bash/" title="Bash">
              Bash
            </a>
          
          
          
            <a class="ui label" href="/tags/browsers/" title="Browsers">
              Browsers
            </a>
          
          
          
            <a class="ui label" href="/tags/c/" title="C">
              C
            </a>
          
          
          
            <a class="ui label" href="/tags/chrome/" title="Chrome">
              Chrome
            </a>
          
          
          
            <a class="ui label" href="/tags/code/" title="Code">
              Code
            </a>
          
          
          
            <a class="ui label" href="/tags/css/" title="Css">
              Css
            </a>
          
          
          
            <a class="ui label" href="/tags/design/" title="Design">
              Design
            </a>
          
          
          
            <a class="ui label" href="/tags/download/" title="Download">
              Download
            </a>
          
          
          
            <a class="ui label" href="/tags/extension/" title="Extension">
              Extension
            </a>
          
          
          
            <a class="ui label" href="/tags/game/" title="Game">
              Game
            </a>
          
          
          
            <a class="ui label" href="/tags/git/" title="Git">
              Git
            </a>
          
          
          
            <a class="ui label" href="/tags/github/" title="Github">
              Github
            </a>
          
          
          
            <a class="ui label" href="/tags/gravity/" title="Gravity">
              Gravity
            </a>
          
          
          
            <a class="ui label" href="/tags/html/" title="Html">
              Html
            </a>
          
          
          
            <a class="ui label" href="/tags/hugo/" title="Hugo">
              Hugo
            </a>
          
          
          
            <a class="ui label" href="/tags/js/" title="Js">
              Js
            </a>
          
          
          
            <a class="ui label" href="/tags/latex/" title="LaTeX">
              LaTeX
            </a>
          
          
          
            <a class="ui label" href="/tags/mathematics/" title="Mathematics">
              Mathematics
            </a>
          
          
          
            <a class="ui label" href="/tags/mathjax/" title="MathJax">
              MathJax
            </a>
          
          
          
            <a class="ui label" href="/tags/pornhub/" title="Pornhub">
              Pornhub
            </a>
          
          
          
            <a class="ui label" href="/tags/ssh-key/" title="SSH Key">
              SSH Key
            </a>
          
          
          
            <a class="ui label" href="/tags/tutorial/" title="Tutorial">
              Tutorial
            </a>
          
          
          
            <a class="ui label" href="/tags/violentmonkey/" title="Violentmonkey">
              Violentmonkey
            </a>
          
          
          
            <a class="ui label" href="/tags/website/" title="Website">
              Website
            </a>
          
          </div>
    

    
  </div>

  
  <script src="/js/sweetalert.min.js"></script> 
  <link rel="stylesheet" href="/css/sweetalert.css" type='text/css' media='all' />
</header>

<script>document.body.oncopy = function() {swal("Copied successfully！", "If you would you like to use this site, please attribute or indicate the source if authorized！","success");};</script>

<div class="ui relaxed grid dream-grid dream-back">
  
  
  
  <div class="sixteen wide mobile eight wide tablet four wide computer column dream-column">
    <article class="ui segment markdown-body">
      <div class="ui medium header">Bio 👋</div>
      <ul>
<li><strong>👨Names</strong>:
<ul>
<li>English: Alex Shao</li>
<li>中文: 邵宪辉</li>
<li>日本語：安田俊樹</li>
</ul>
</li>
<li><strong>👀Age</strong>: 16, 2005/4/25</li>
<li><strong>🏫School</strong>: SLAS (shittiest school ever)</li>
<li><strong>❤️Interests</strong>: Python, Html, Java, Js, Anime(especially &ldquo;ダンジョンに出会いを求めるのは間違っているだろうか&rdquo;), Math, Science, Sleep, Diarreah &amp; Constipation (Well, I had stomache issue since I was born, innate), bikes</li>
<li><strong>🚩Nationality</strong>: Chinese &amp; Japanese (Microsoft somehow does not support country flag emojis&hellip;)</li>
<li><strong>💼Occupation</strong>: Student</li>
<li><strong>📺Movies</strong>: No movies, animes only, &ldquo;ダンジョンに出会いを求めるのは間違っているだろうか&rdquo;</li>
<li><strong>📫Email</strong>: <a href="mailto:alex2005@gmail.com">alex2005@gmail.com</a></li>
<li><strong>👨‍🏫Values</strong>: Constrain impetuosity</li>
<li><strong>🐧QQ</strong>: 1959796501 (Also contact my QQ besides mail)</li>
<li><strong>💻Device</strong>: Huawei Matebook 14, 2019</li>
<li><strong>🖱️IDE</strong>: VsCode</li>
</ul>

    </article>
  </div>
  
  <div class="sixteen wide mobile eight wide tablet four wide computer column dream-column">
    <article class="ui segment markdown-body">
      <div class="ui medium header">Acknowledgments</div>
      <ul>
<li><strong>Vansh Kamleshbhai Padaliya</strong>: Always helping and assisting with no doubts and hesitations, good buddy, known for 3 years.</li>
<li><strong>吴思萌 Mónica</strong>: An elder sister, always accompanying and encouraging, deskmate in previous school, known for 5 years.</li>
<li><strong>姚轶膑</strong>: Great buddy as well, spent time screwing out often, always encouraging, known for 5 years.</li>
<li><strong>Koki Kin</strong>: Typical Japanese Otaku, still a great buddy, known for 1.5 years, giving help when I need.</li>
<li><strong>Semih Deli</strong>: Known since 2, developed this site together.</li>
<li>All the others people who answered my requests I pulled on Github when I met problems.</li>
</ul>

    </article>
  </div>
  

  <div class="sixteen wide mobile eight wide tablet four wide computer column dream-column">
    <article class="ui segment">
      <div class="ui medium header">Social Links</div>
      <nav class="ui secondary menu dream-menu dream-socials">
  
  <a class="item" href="/index.xml">
    <i class="large rss square icon" title="RSS"></i>
  </a>
  

  
  <a class="item" href="mailto:AlexShao20050425@163.com">
    <i class="large mail icon" title="Email"></i>
  </a>
  

  

  

  

  

  

  

  

  

  
  
  
    <a class="item" href="https://github.com/ashao0425" target="_blank">
      <i class="large github icon" title="GitHub"></i>
    </a>
  
  
</nav>

    </article>
  </div>

  <div class="sixteen wide mobile eight wide tablet four wide computer column dream-column">
    
    <article class="ui segment">
      <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.
    </article>
    
  </div>

  
</div>

          </div>
        </section>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

    
    <div class="ui segment" id="dream-search">
  <div class="ui search">
    <div class="ui transparent input">
      <input class="prompt" type="text" placeholder="Search" />
    </div>
    <div class="results"></div>
  </div>
</div>
<script>
  $(document).ready(function () {
    $.getJSON('https:\/\/AShao0425.github.io\//index.json', function (data) {
      $('.ui.search').search({
        source: data,
        searchFields: ['title'],
        showNoResults: false,
      })
    })
  })
</script>
<script src="/js/search.js"></script>

    

    

    <script>
  window.background = "/background/back1.png"
  window.defaultDark =  null 
  window.backgroundDark = "/background/BackgroundBlack.jpg"
  window.backgroundImageDark = "/background/BackgroundBlack.jpg"
  window.darkNav =  true 
  window.maxTags =  null 
  window.hasTwitterEmbed =  null 
  window.fixedNav =  true 

  if (window.hasTwitterEmbed) {
    
    window.twttr = (function (d, s, id) {
      var js,
        fjs = d.getElementsByTagName(s)[0],
        t = window.twttr || {}
      if (d.getElementById(id)) return t
      js = d.createElement(s)
      js.id = id
      js.src = 'https://platform.twitter.com/widgets.js'
      fjs.parentNode.insertBefore(js, fjs)

      t._e = []
      t.ready = function (f) {
        t._e.push(f)
      }

      return t
    })(document, 'script', 'twitter-wjs')
  }
</script>
<script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@1.13.1/js/jquery.overlayScrollbars.min.js"></script>
<script src="/js/header.js"></script>
<script src="/js/main.js"></script>
<script src="/js/theme.js"></script>
    


<script src="https://cdn.jsdelivr.net/npm/luxon@1.26.0"></script>

<script>
  format()

  function format() {
    $('span[data-format="luxon"]').each(function () {
      var date = $(this).text()

      $(this).text(luxon.DateTime.fromISO(date, { locale: "en" }).toFormat("yyyy/MM/dd"))
    })
  }
</script>



<script src="/js/scrollToTop.js"></script>


<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js"></script>



<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/languages/clojure.min.js"></script>

<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/languages/ocaml.min.js"></script>



<script>
  hljs.highlightAll()
  setHighlightTheme()

  function setHighlightTheme() {
    var isDark = localStore.getItem('hugo-theme-dream-is-dark')
    isDark = isDark ? isDark : window.defaultDark ? 'y' : isDark

    var lightTheme = "tomorrow"
    var darkTheme = "tomorrow-night"
    var theme = isDark === 'y' ? darkTheme : lightTheme

    $('link[data-highlight]').attr('href', 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/' + theme + '.min.css')
    $('pre').css('background', isDark === 'y' ? '#333' : '')
  }
</script>



<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.1"></script>
<script src="/js/post.js" defer></script>


    

    
    
<script type="application/javascript">
var doNotTrack = false;
if (!doNotTrack) {
	window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
	ga('create', 'UA-206749728-1', 'auto');
	
	ga('send', 'pageview');
}
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>

    
	
	
    <div id="landlord">
      <div class="message" style="opacity:0"></div>
      <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
      <div class="hide-button">Hide</div>
    </div>
    
	
    <script type="text/javascript">
      var message_Path = '/live2d/'
      var home_Path = 'https://ashao0425.github.io/'  <!--Edit the domain into yours here-->
    </script>
    <script type="text/javascript" src="/live2d/js/live2d.js"></script>
    <script type="text/javascript" src="/live2d/js/message.js"></script>
    <script type="text/javascript">
      loadlive2d("live2d", "/live2d/model/tia/model.json");
    </script>
  </body>

  
  
  
	
    <canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
    <script type="text/javascript" src="/js/anime.min.js"></script> 
    <script type="text/javascript" src="/js/fireworks.js"></script> 
</html>
